<template>
    <fieldset>
        <legend>三级联动</legend>
        省：
        <select v-model="sel1" @change="provienceChange(sel1)">
            <option  v-for="item in provience" :key="item.id" :value="item.id">{{item.name}}</option>
        </select>
        市：
        <select v-model="sel2" @change="citysChange(sel2)">
            <option v-for="item in citys" :key="item.id" :value="item.id">{{item.name}}</option>
        </select>
        县：
        <select v-model="sel3">
            <option v-for="item in countys" :key="item.id" :value="item.id">{{item.name}}</option>
        </select>
    </fieldset>
</template>
<script>
import * as api from "@/api/select"
export default{
    data(){
        return{
            //省的数据
            provience: [],
            //市的数据
            citys: [],
            // 县的数据
            countys:[],
            //选中的省的id
            sel1: 1,
            //选中市的id
            sel2: "",
            // 选中县的id
            sel3:"" 
        }
    },
    mounted(){
        // 从api接口获得省份数据
        api.fetchData()
        .then(res=>{
            console.log(res);
            this.provience = res;
            // 默认选中第一条的数据
            //获取默认第一条的id
            let pid =res[0].id;
            this.provienceChange(pid)
        })
    },
    methods:{
        provienceChange(pid){
            console.log(pid)//获得选中的省份的id
            //选择的省变化的时候,获取选择的省对应的id,发起请求,请求市的数据
            api.fetchCity(this.sel1)
            .then(res=>{
                console.log(res)
                this.citys = res
                // 默认选中第一条的数据
                if(res.length >0){
                    this.sel2 = res[0].id
                }
            })
        },
        citysChange(pid){
            console.log(pid)//获得选中的市的id
            //选择的市变化的时候,获取选择的市对应的id,发起请求,请求县的数据
            api.fetchCounty(this.sel2)
            .then(res=>{
                console.log(res)
                this.countys = res
                if(res.length>0){
                    this.sel3 = res[0].id
                }
            })
        }
    }
}

</script>
<style>
    select{
        width: 100px;
    }
</style>